const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	// 设置打包模式
	mode: 'development',

	// 设置是否代码压缩
	// optimization: {
	// 	minimize: true,
	// },

	// 指定入口文件
	entry: './src/index.ts',

	// devtool: 'inline-source-map',
	// devServer: {
	// 	contentBase: './dist',
	// },

	// 指定打包文件所在目录
	output: {
		// 指定打包后的文件目录
		path: path.resolve(__dirname, 'dist'),
		// 指定打包后的文件
		filename: 'bundle.js',

		environment: {
			arrowFunction: false, // 关闭webpack的箭头函数，可选
		},

		// 自动将上次打包目录资源清空 webpack5之前版本需要引入插件clean-webpack-plugin实现
		clean: true,
	},

	// 设置可以引用的模块文件，默认不支持引用.ts文件模块
	resolve: {
		extensions: ['.ts', '.js'],
	},

	// 指定webpack打包时要使用的模块
	module: {
		// 指定加载规则
		rules: [
			{
				// 指定规则生效的文件
				test: /\.ts$/,
				// 不需要编译的文件
				exclude: /node_modules/,
				// 要使用的loader，执行顺序是从后往前
				use: [
					// 配置babel
					{
						loader: 'babel-loader',
						options: {
							// 设置预定义的环境
							presets: [
								[
									'@babel/preset-env',
									{
										// 指定需要兼容的浏览器版本
										targets: { chrome: '58' },
										// 指定corejs版本
										corejs: '3',
										// 使用corejs的方式，"usage" 表示按需加载
										useBuiltIns: 'usage',
									},
								],
							],
						},
					},
					'ts-loader',
				],
			},
			// 设置less文件的处理
			{
				test: /\.less$/,
				use: [
					'style-loader',
					'css-loader',

					// 引入postcss
					// 类似于babel，把css语法转换兼容旧版浏览器的语法
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								plugins: [
									[
										// 浏览器兼容插件
										'postcss-preset-env',
										{
											// 每个浏览器最新两个版本
											browsers: 'last 2 versions',
										},
									],
								],
							},
						},
					},
					'less-loader',
				],
			},
		],
	},
	plugins: [
		new HtmlWebpackPlugin({
			// 自定义html文件标题
			// title: 'TS测试',
			// html文件模板
			template: './src/index.html',
		}),
	],

	// 开发服务器
	devServer: {
		// host: 'localhost', // 启动服务器域名
		// port: '3000', // 启动服务器端口号
		open: true, // 是否自动打开浏览器
		hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）
	},
};
